<template>
  <div class="strategyBox">
    <div class="header flex">
      <img :src="PIC_URL + '/tlbypcWeb/themeStrategy/title.png'" alt="" />
    </div>
    <div class="strategy_ourt flex">
      <div class="left_box">
        <div class="title">
          <span>主题策略</span>
        </div>
        <div class="dataList">
          <ul class="dataItem">
            <li
              class="item"
              v-for="(item, index) in dataList"
              :key="item.id"
              @click="itemClick(item, index)"
              :class="{ active: num == index }"
            >
              <div class="itemTitle">{{ item.title }}</div>
              <div class="pub_time">{{ item.pub_time }}</div>
            </li>

            <li class="moreDate flex" @click="moreClick">
              {{
                dataList.length == 0 || limit > dataList.length
                  ? "暂无更多数据"
                  : "加载更多"
              }}
              <span
                class="bottoms"
                v-if="
                  dataList.length == 0 || dataList.length < limit ? false : true
                "
              >
                <img
                  :src="PIC_URL + '/tlbypcWeb/themeStrategy/more.png'"
                  alt=""
                />
              </span>
            </li>
          </ul>
        </div>
      </div>
      <div class="right_box">
        <div class="right_ourt">
          <iframe id="pdf" :src="link" frameborder="0"></iframe>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { announcementList } from "../api/api";
import dayjs from "dayjs";
import { PRODUCT_URL } from "@/common/const";

export default {
  data() {
    return {
      send: {
        type: 2,
        pageSize: 0,
        limit: 10,
      },
      currentPage: 1,
      dataList: [],
      link: "",
      num: 0,
    };
  },
  computed: {},
  mounted() {
    document.title = "主题策略";
    this.getDate();
  },
  methods: {
    async getDate() {
      this.limit = this.currentPage * 20;
      await announcementList({
        type: this.send.type,
        pageSize: this.send.pageSize, //
        limit: this.limit, //条数
      }).then((rows) => {
        console.log(rows, "rows");
        if (rows.status == 1) {
          this.dataList = rows.data.map((item) => {
            item.pub_time = item.pub_time
              ? dayjs(item.pub_time).format("YYYY-MM-DD")
              : "";
            item.link = item.link;
            return item;
          });
          console.log(this.dataList, "7878");
          console.log(PRODUCT_URL, "PRODUCT_URL");
          if (this.dataList.length <= 20) {
            if (this.dataList[0].link != "") {
              this.link = PRODUCT_URL + "/yngpProduct" + this.dataList[0].link;
            }
          }
        }
      });
    },

    //打开pdf
    itemClick(item, index) {
      this.num = index;
      this.link = PRODUCT_URL + "/yngpProduct" + item.link;
    },
    //加载更多
    moreClick() {
      if (this.dataList.length == 0 || this.dataList.length < this.limit)
        return;
      this.currentPage++;
      this.send.imit = this.send.limit * this.currentPage;
      this.getDate();
    },
  },
};
</script>
<style scoped lang="scss">
.strategyBox {
  color: #fff;
  width: 1201px;
  margin: 0 auto;
  font-family: Microsoft YaHei;
  font-weight: 400;
  box-sizing: border-box;
  .header {
    height: 35px;
    align-items: center;
    justify-content: center;
    margin: 20px 0;
    box-sizing: border-box;
  }
  .strategy_ourt {
    height: 837px;
    .left_box {
      width: 451px;
      height: 100%;
      background: #0d121e;
      border: 1px solid #454855;
      .title {
        width: 100%;
        height: 40px;
        background: #262831;
        color: #fff;
        span {
          display: inline-block;
          padding: 10px 30px;
          box-sizing: border-box;
          background: #35497c;
          font-size: 18px;
        }
      }
      .dataList {
        font-size: 0;
        height: 795px;
        .dataItem {
          width: 100%;
          font-size: 18px;
          height: 100%;
          overflow-y: scroll;
          .item {
            width: 449px;
            min-height: 87px;
            border-bottom: 1px solid #262831;
            background: #0c101b;
            padding: 20px 18px;
            box-sizing: border-box;
            cursor: pointer;
            .itemTitle {
              color: #dddfed;
              padding-bottom: 16px;
            }
            .pub_time {
              color: #979aad;
              font-size: 16px;
            }
          }
          .active {
            background: #2c3040;
          }
          .item:hover {
            background: #1d202e;
          }
          // 加载更多
          .moreDate {
            cursor: pointer;
            text-align: center;
            justify-content: center;
            font-size: 16px;
            color: #e9cbab;
            line-height: 40px;
            background: #1d202e;
            .bottoms {
              display: inline-block;
              width: 15px;
              height: 15px;
              img {
                width: 100%;
                height: 100%;
              }
            }
          }
        }
      }
    }
    //pdf
    .right_box {
      width: 750px;
      height: 100%;
      background: #e2e2e2;
      padding: 24px 20px;
      box-sizing: border-box;
      .right_ourt {
        width: 709px;
        height: 788px;
        background: #ffffff;
        box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.46);
        border-radius: 5px;
        font-size: 16px;
        color: #000;
        box-sizing: border-box;
        position: relative;
      }
      #pdf {
        width: 100%;
        height: 100%;
        overflow-y: scroll;
      }
    }
  }
}
.pop {
  width: 200px;
  position: absolute;
  background: transparent;
  right: 16px;
  height: 57px;
  overflow: hidden;
}
</style>
<style>
embed::-webkit-scrollbar {
  height: 6px;
  width: 6px;
  overflow: visible;
  background: red;
}
embed::-webkit-scrollbar-thumb {
  -webkit-border-radius: 3px;
  border-radius: 3px;
  min-height: 28px;
  padding: 20px 0 0;
  background: #404041;
  -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.07);
  box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.07);
}
</style>
